<template>
<div class="customer">

    <div>
    <div class="face" v-for="(v,index) in arr" :key="index">
        <div class="face_box1">
            <p>用户007</p>
            <div class="goods">
                <img :src="preobj.img1" alt="">
                <div>
                    <p>{{ preobj.proname }}</p>
                    <span class="span1">月销 {{ preobj.sales }}+</span>
                    <span class="span2">￥{{ preobj.originprice }}</span>
                </div>
            </div>
        </div>
        <div class="face_box2">
            <img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=%E7%BD%97%E4%B9%A6%E5%81%9C2255&type=sns&_input_charset=utf-8" alt="">
        </div>
    </div>
</div>
    <!-- 聊天 -->
  <div class="dialog" v-for="(v,index) in dialog" :key="index">
    <!-- 用户聊天框 -->
    <div class="dialog1" >
        <div class="log1_box1">
            <p>用户007</p>
            <div>{{ v.msg1 }}</div>
        </div>
        <div class="log1_box2">
            <img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=%E7%BD%97%E4%B9%A6%E5%81%9C2255&type=sns&_input_charset=utf-8"
                alt="">
        </div>
    </div>

    <!-- 客服聊天框 --> 
    <div class="dialog1 dialog2" v-show="v.blone">
        <div class="log1_box2">
            <img src="https://marketplace.canva.cn/zYh5E/MACHwxzYh5E/2/tl/canva-%E5%AD%A4%E7%AB%8B%E7%9A%84%E4%BA%BA%E5%A4%B4%E5%AD%A4%E7%AB%8B%E7%9A%84%E4%BA%BA%E5%A4%B4-isolated-man-head-isolated-man-head-MACHwxzYh5E.png"
                alt="">
        </div>
        <div class="log1_box1">
            <p>智能客服小旭东</p>
            <div class="tianjia" v-html="v.msg2">

            </div>
        </div>
    </div>
</div>

    <!-- 商品卡片 -->
    <div class="card" v-if="!flag">
        <img :src="preobj.img1" alt="">
        <div class="card_box1">
            <p>{{ preobj.proname }}</p>
            <span>￥{{ preobj.originprice }}</span>
        </div>
        <div class="card_box2">
            <div @click="sendgoods">发给商家</div>
            <img @click="disappear"  src="https://gw.alicdn.com/tfs/TB1vDu60VT7gK0jSZFpXXaTkpXa-24-24.png" alt="">
        </div>
    </div>

    <div class="foot">
        <div class="text">
            <input type="text" v-model="value" @keypress.enter="send" ref="ref1">
            <img  src="https://gw.alicdn.com/tfs/TB1BkhBxbrpK1RjSZTEXXcWAVXa-208-204.png" alt="">
        </div>
        <span @click="send" >发送</span>
        <img src="https://gw.alicdn.com/tfs/TB1FV0yxhTpK1RjSZR0XXbEwXXa-200-200.png" alt="">
    </div>

</div>
</template>

<script>

export default {
    data(){
        return{
            flag:true,
            preobj:{},
            dialog:[],
            value:"",
            arr:0,
            showarr:[],
            myhtml:""

        }
    },
    methods:{
        disappear(){
            this.flag=true;
        },
        send(){

            if(this.value){
               
                this.dialog.push(
                    {
                        msg1: this.value,
                        msg2: "天猫智能客服小旭东为您服务，请问有什么可以帮助您的？",
                        blone: false
                        }
                    )
                this.value=''
               
                setTimeout(()=>{
                    this.dialog[this.dialog.length-1].blone=true
                },2000)

                this.$refs.ref1.focus()
            }
              
        },
        sendgoods(){
            this.arr=1
            this.flag=true
        },

        handleScroll(){
           let top= document.documentElement.scrollTop
            console.log(top);
        }
        

    },
    mounted(){

        this.preobj = JSON.parse(this.$route.query.arrPre)
        console.log(this.preobj);

        window.addEventListener("scroll", this.handleScroll);

        this.flag = this.$route.query.flag
    }

}
</script>

<style scoped>
.tianjia{
    display: flex;
    flex-direction: column;
    background-color: cornflowerblue;
}
.tjbox{
    width: 200px;
    display: flex;
    flex-direction: column;
}
.tjbox>p{
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.tjbox .tjbox1 {
    display: flex;

}
.tjbox1 div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 5px;
}
.tjbox .tjbox1 p{
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.tjbox .tjbox1 span{
    font-size: 14px;
    color: #FF5000;
}
.tjbox img{
    width: 60px;
    height: 60px;
    margin: 5px 0 5px 0;
}





.customer{
width: 100%;
height: 90vh;
background: #e5e5e5;
overflow: auto;
}
.face{
    width: 94%;
    /* height: 198px; */
    margin: 10px 3%;
    display: flex;
    justify-content: end;
}
.face_box1{
    width: 235px;
    /* height: 198px; */
    
}
.face_box1>p{
    width: 100%;
    height: 20px;
    font-size: 13px;
    color: #999999;
    display: flex;
    justify-content: end;
}
.face_box1 .goods{
    width: 100%;
    background: #fff;
    border-radius: 10px;
    margin-top: 5px;
    display: flex;
}
.goods img{
    width: 95px;
    height: 95px;
    margin: 10px;
}
 .goods div{
    flex: 1;
    height: 95px;
    box-sizing: border-box;
    margin: 10px 10px 10px 0;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
 .goods div p{
    color: #666666;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
 }
  .goods div .span1{
    font-size: 12px;
    color: #999999;
  }
  .goods div .span2{
    color: #FF5000;
    font-size: 18px;
  }

.face_box2 {
    width: 50px;
    /* height: 198px; */
    text-align: center;
    
}
.face_box2 img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
/* 对话 */
.dialog1{
    width: 94%;
    margin: 10px 3%;
    display: flex;
    justify-content: end;
}
.dialog2{
    justify-content: flex-start;
}

.log1_box1{
    width: auto;
}

.log1_box1>p {
    width: auto;
    height: 20px;
    font-size: 13px;
    color: #999999;
    display: flex;
    justify-content: end;
}
.log1_box1 div{
    max-width: 218px;
    background: #fff;
    color: #090909;
    border-radius: 10px;
    display: flex;
    padding: 9px;
}
.log1_box2 img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.card{
width: 94%;
height: 78px;
margin: 10px 3%;
display:flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 10px;
position: fixed;
bottom: 70px;
}
.card img{
width: 60px;
height: 60px;
margin:0 10px;
}
.card_box1{
height: 100%;
width: 185px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.card_box1 p{
width: 90%;
height: 20px;
color: #090909;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.card_box1 span{
height: 20.9px;
color: #FF5000;
font-size: 18px;
}
.card_box2{
width: 75px;
height: 60px;
margin-right: 10px;
display: flex;
flex-direction: column;
justify-content: end;
position: relative;
}
.card_box2 div{
    width: 75px;
    height: 25px;
    border-radius: 12.5px;
    background-image: linear-gradient(to right top, rgb(254, 86, 10), rgb(255, 153, 1));
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 25px;
}
.card_box2 img{
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    right: -10px;
}
.foot{
box-sizing: border-box;
width: 100%;
height: 60px;
display: flex;
background: #f2f2f2;
padding: 0 12px 10px;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
}
.foot .text{
height: 36px;
flex: 1;
background: #fff;
display: flex;
border-radius: 18px;
padding-right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
   
}
.foot .text input{
flex: 1;
margin:0 15px;
}
.foot .text img{
width: 26.26px;
height: 25.75px;
}
.foot span{ 
width: 45px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
font-size: 14px;
background-image: linear-gradient(to right top, rgb(255, 153, 1), rgb(254, 86, 10));
margin: 0 10px;
border-radius: 15px;
}
.foot>img{
width: 30px;
height: 30px;
}
</style>